<template>
  <div class="pop-up-child" @click="closePop" v-if="showLiveInvitation">
    <div class="header-box" >
        <header class="header">
          <p class="invite-description" v-if="tipTxetBoolen" @click="clickToggle">邀请说明</p>
          <p class="invite-description-hidden" v-else></p>
          <p class="title" v-if="!['landspaeBackCom','landscapeLiveCom'].includes(isFrom)" v-text='inviteTitle'></p>
          <div class="close" v-if="!['landspaeBackCom','landscapeLiveCom'].includes(isFrom)" @click="close"></div>
      </header>
      <!-- 邀请说明 -->
      <p class="invite-des-content" v-show="isShow">{{ tipText || '点击右上角分享按钮，邀请好友进入该场直播,截止本场直播结束前，邀请榜前三名的用户将获得惊喜大奖。'}}</p>
    </div>
      <div class="main-box" @touchmove="handleTouchMove">
          <!-- 手机号 -->
        <div class="tel-box" v-if="isTel">
          <span class="tel-tip">手机号码:</span>
          <input id="yaoqingbang_shoujihao" class="tel-input" @click="clickTelInput" @blur="blurRu" v-model="telNum" ref="inputTel" type="number" placeholder="请填写手机号"/>
          <div v-if="isRed" class="tel-btn" @click="savePhoneNum">提交</div>
          <div v-else class="tel-btn-gray">提交</div>
        </div>
        <!-- 个人排名 -->
        <div v-if='isGRPM' class="item-rank">
          <p class="num-box">
            <span>{{personageData.rowNo || 0}}</span>
            <span>我的排名</span>
          </p>
          <img onerror="imgError()" :src="personageData.avatar || wxPic || imgTx" />
          <span class="name-box">{{personageData.nick||nickName||un}}</span>
          <p class="invited-num">邀请<span>{{personageData.c||0}}</span>人</p>
        </div>
       <!-- 列表 -->
      <ul class="InvitationListArray-box">
          <div class="order-box">
              <div :class="`box${index+1}`" v-for="(v,index) in topThreeInvitationList" :key="index">
                  <div class="item-top-box" :class="!v.avatar?'img-no':''">
                      <img onerror="imgError()" v-if="v.avatar" :src="v.avatar"/>
                      <span class="name-box">{{v.nick||v.fromUn}}</span>
                      <p class="invited-num">邀请<span>{{v.c||0}}</span>人</p>
                  </div>
              </div>
          </div>
          <li v-for="(v,index) in InvitationListArray" :key="index">		
              <div class="item-rank">
                  <p class="num-box-index">
                    {{index+4}}
                  </p>
                  <img onerror="imgError()" :src="v.avatar" />
                  <span class="name-box">{{v.nick||v.fromUn}}</span>
                  <p class="invited-num">邀请<span>{{v.c||0}}</span>人</p>
              </div>
          </li>
      </ul>
      <p class="clickMore" @click="clickMore">{{moreTipText}}</p>
    </div>
  </div>
</template>
<script>
  import config from "../../config"
  export default {
    components: {
      // Name
    },
    props:{
      roomInfo:Object,//房间信息
      videoInfo:Object,//回看信息
      pageType:String,//直播间 回看区分
      isFrom:String,//来自横竖屏直播和回看
    },
    data() {
      return {
        showLiveInvitation: true,
        inviteTitle: '',
        topThreeInvitationList:[],//前三位
        InvitationListArray: [],
				InvitationListNewArray: [],
				imgArray: [
					require('../../assets/images/num1.png'),
					require('../../assets/images/num2.png'),
					require('../../assets/images/num3.png'),
				],
        tipText: "",
        newTipText:"",
				tipTxetBoolen: false,
				page: 1,
				moreTipText: "",
				channelArr: [config.ZHANGHANG_01, config.ZGYH, config.ZGYH_PX],
				yqylShow: false,
				isTel: false, //手机box显示不显示
				telNum: '',
				isRed: false,
				personageData: {}, //个人排行数据
        isGRPM:false,
        isShow:false,//邀请说明是否展开
        videoId: '', //回看传过来的id
        un:'',
        nickName:'',
        wxPic:'',
      }
    },
    created: function() {
      if(this.pageType=='lookBackPage' ||this.isFrom =='landspaeBackCom'){//回看
          this.videoId = this.$route.params.id;
          this.getBackInvitationList()
          this.inviteTitle = this.videoInfo.tables[this.videoInfo.tables.findIndex(m => m.type == 4)].title
      }else{//直播
        this.getInvitationList()
        this.getYQshow()
        this.getInviteFromUn()
        this.inviteTitle = this.roomInfo.tables[this.roomInfo.tables.findIndex(m => m.type == 4)].title
      }
      if(this.$store.state.userInfo.un != undefined && this.$store.state.userInfo.un.length > 0) { //im 消息初始化
      	this.un = this.$store.state.userInfo.un;
      	this.nickName = this.$store.state.userInfo.nickname;
      	this.wxPic = this.$store.state.userInfo.wxpic;
      }
		},
		computed: {
      uinfo() {
      	return this.$store.state.userInfo;
      },
    },
    watch:{
    	uinfo(curVal, oldVal) {
    		if(curVal.un != undefined && curVal.un.length > 0) {
                   this.un = this.$store.state.userInfo.un;
    		   this.nickName = this.$store.state.userInfo.nickname;
    		   this.wxPic = this.$store.state.userInfo.wxpic;
    		}
    	},
    },
    mounted() {
    },
    methods: {
      getBackInvitationList() {
      	this.$http.get('/h5live/vod/shareInviteRank?vid=' + this.videoId + "&p=" + this.page).then((res) => {
      		if(res.data.code == '000000') {
      			if(!this.$store.state.isYk){//游客不展示 个人信息
      					this.isGRPM = true;
      					this.personageData = res.data.data.myRank;//个人排名
      				}
      			if(res.data.data.statList.length >= 10) {
      				this.moreTipText = "查看更多分享榜单"
      			}
              this.InvitationListArray = res.data.data.statList.splice(3); //整个数组
              this.topThreeInvitationList = res.data.data.statList
              if(this.topThreeInvitationList.length == 1){
                 this.topThreeInvitationList.push({nick:'--'},{nick:'--'})
              }
              if(this.topThreeInvitationList.length == 2){
                 this.topThreeInvitationList.push({nick:'--'})
                 console.log(this.topThreeInvitationList,'this.topThreeInvitationList')
              }   
      		}
      	}, (err) => {
      		console.log(err);
      	})
      },
      close() {//
           this.$emit('formChildMsg', {//关闭邀请榜弹出层
             type: 'closeInvite',
             data: ''
           })
      },
       getInviteFromUn() { //个人排名
				let _this = this;
				_this.$http.get("/h5live/getInviteFromUn?roomId=" + this.roomInfo.roomInfo.roomId).then(
					res => {
						if(res.data.code == '000000') {
              _this.personageData = res.data.data
							if(!_this.$store.state.isYk){//游客不展示 个人信息
                _this.isGRPM = true
							}
						} else {
							console.log('个人邀请接口错误')
							_this.isGRPM = false
						}
					}
				)
			},
      getInvitationList() {
				let _this = this;
				_this.$http.get('/h5live/shareInviteRank?roomId=' + this.roomInfo.roomInfo.roomId + "&p=" + _this.page).then(
          res => {
					if(res.data.code == '000000') {
						if(res.data.data.invitaNote) {
							_this.tipTxetBoolen = true;
              _this.tipText = res.data.data.invitaNote;
						} else {
							_this.tipTxetBoolen = false;
						}
            if(res.data.data.statList.length >= 10) {
							_this.moreTipText = "查看更多分享榜单"
            } 
            _this.InvitationListArray = res.data.data.statList.splice(3); //整个数组
            _this.topThreeInvitationList = res.data.data.statList
              if(_this.topThreeInvitationList.length == 1){
                 _this.topThreeInvitationList.push({nick:'--'},{nick:'--'})
              }
              if(_this.topThreeInvitationList.length == 2){
                 _this.topThreeInvitationList.push({nick:'--'})
                 console.log(_this.topThreeInvitationList,'this.topThreeInvitationList')
              }
					}
				},
        err => {
					console.log(err);
				})
      },
      clickMore() {
           if(this.pageType=='lookBackPage' || this.isFrom=='landspaeBackCom'){//回看
              this.loadBackMore()
           }else{
              this.loadLiveMore()
           }
			},
      loadLiveMore(){//直播间更多
         this.page++
         	let _this = this;
         _this.$http.get('/h5live/shareInviteRank?roomId=' + this.$route.params.roomid + "&p=" + _this.page).then((res) => {
         	if(res.data.code == '000000') {
         		_this.InvitationListNewArray = res.data.data.statList; //整个数组
         		for(var i = 0; i < _this.InvitationListNewArray.length; i++) {
         			_this.InvitationListArray.push(_this.InvitationListNewArray[i]);
         		}
         		if(_this.InvitationListNewArray.length == 0) {
         			_this.moreTipText = "没有更多数据"
         		}
         	}
         }, (err) => {
         	console.log(err);
         })
      },
      loadBackMore(){//回看更多
         this.page++
         	let _this = this;
         _this.$http.get('/h5live/vod/shareInviteRank?vid=' + _this.videoId + "&p=" + _this.page).then((res) => {
         	if(res.data.code == '000000') {
         		_this.InvitationListNewArray = res.data.data.statList; //整个数组
         		for(var i = 0; i < _this.InvitationListNewArray.length; i++) {
         			_this.InvitationListArray.push(_this.InvitationListNewArray[i]);
         		}
         		if(_this.InvitationListNewArray.length == 0) {
         			_this.moreTipText = "没有更多数据"
         		}
         	}
         }, (err) => {
         	console.log(err);
         })
      },
      //填写手机号 显示不显示
			getYQshow() {
				let _this = this;
				_this.$http.get("/h5live/getRoomInvitaCard?roomId=" + this.roomInfo.roomInfo.roomId).then(
					res => {
						if(res.data.code == "000000") {
							if(res.data.data.openMobile == '1') { //0是关闭  1是开启
								_this.isTel = true
								_this.getTelPhoneNum()
							} else {
								_this.isTel = false
							}
						}
					},
					err => {
						console.log(err);
					}
				);
			},
      // 第二次进入时 获取已填过的邀请榜手机号
			getTelPhoneNum() {
				let _this = this;
				_this.$http.get('/h5live/getInvitePhone?acct=' + this.roomInfo.roomInfo.anchor).then((res) => {
					if(res.data.code == '000000') {
						//console.log(res.data)
						//res.data.data=""
						if(res.data.data) { //有手机号码
							_this.telNum = res.data.data
							_this.isRed = false
						} else {
							_this.isRed = true
						}
					}
				}, (err) => {
					console.log(err);
				})
			},
      //点击input
			clickTelInput() {
				this.$refs.inputTel.focus()
			},
      blurRu() { //input 失去焦点  解决ios 最新版本6.7.4 input BUG
				setTimeout(function() {
					window.scrollTo(0, 0)//回到页面顶部
				}, 100)
      },
      //更新手机号码
			savePhoneNum() {
				let _this = this;
				if(this.$store.state.isYk) {
					let jointUrl = fun.getCurPageUrl('live',this.$route.params.roomid)
					fun.ykDisposeFun(jointUrl);
					return
				}
				if(_this.telNum.length) {
					_this.$http.post('/h5live/saveInvitePhone?phone=' + _this.telNum + "&acct=" + this.roomInfo.roomInfo.anchor).then((res) => {
						if(res.data.code == '000000') { //应该为11位
							_this.isRed = false;
							fun.toastMessage('提交成功');
						} else {
							fun.toastMessage('手机号码格式错误');
						}
					}, (err) => {
						console.log(err);
					})
				} else {
					fun.toastMessage('手机号码不能为空');
				}

      },
      //邀请说明 展开 收起
      clickToggle(e){
        e.stopPropagation();
        this.isShow = !this.isShow
      },
      closePop(){
        this.isShow = this.isShow ? false:false
      },
      handleTouchMove(){
         if(this.isShow){
            this.isShow = false
         }
      },
    },
  };
</script>
<style scoped>
.pop-up-child {
  width: 100%;
  height: 835px;
  background: #FFFFFF;
  position: fixed;
  left: 0;
  bottom: 0;
  z-index: 1501;
  border-radius: 20px 20px 0px 0px;
}

.pop-up-child .header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding-top: 27px;
  padding-left: 36px;
  padding-right: 20px;
}

.pop-up-child .title {
  height: 28px;
  font-size: 28px;
  font-weight: bold;
  color: #434343;
}
.invite-description{
  display: flex;
  align-items: center;
  font-size: 24px;
  font-weight: 400;
  color: #666666;
}
.invite-description-hidden{
   min-width: 40px;
}
.invite-description +.title{
  margin-right: 110px;

}
.invite-description::after{
  content: "";
  display: inline-block;
  width: 28px;
  height: 28px;
  margin-left: 15px;
  background: url('../../assets/images/zxyh/description.png') no-repeat;
  background-size: 100% 100%;
  
}

.pop-up-child .close {
  height: 40px;
  width: 40px;
  background: url('../../assets/images/zxyh/zxyh_close.png') no-repeat;
  background-size: 100% 100%;
}

.pop-up-child .iconcha1 {
  padding: 0 30px;
  font-size: 18px;
  color: #c8c9cc;
}

.invitation-list-content {
  width: 100%;
  max-height: calc(678px - 64px);
  overflow-y: scroll;
}
.head-tip-box{
  position: relative;
}
.icon-box{
   position: absolute;
   right: 20px;
   bottom: 14px;
}
.head-tip-box .iconspread-line,.head-tip-box .iconshouqi-copy{
 font-size: 32px;
 color: #FFFFFF;
}
.head-tip-box p{
  padding: 10px 20px;
  margin-top: 10px;
  font-size: 26px;
  font-weight: 400;
  line-height: 44px;
  color: #FFFFFF;
  background: linear-gradient(180deg, #F93A4A, #F84A4C);
  box-shadow: 0px 4px 8px 1px rgba(255, 0, 18, 0.13);
  border-radius: 0px 15px 15px 0px;
}
.head-tip {
  width: fit-content;
}


.tel-box {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin: 15px 30px;
  padding: 17px 0 17px 10px;
  background: #F9F9F9;
  border-radius: 12px 12px 12px 12px;
}

.tel-tip {
  width: 160px;
  text-align: center;
  font-size: 28px;
  color: #666666;
}

.tel-input {
  flex: 1;
  height: 64px;
  background: #FFFFFF;;
  border-radius: 12px;
  padding-left: 30px;
  font-size: 28px;
  color: #CCCCCC;
}

.tel-btn {
  width: 140px;
  height: 64px;
  background: rgba(248, 80, 80, 1);
  border-radius: 12px;
  line-height: 64px;
  text-align: center;
  color: white;
  font-size: 28px;
  display: inline-block;
  margin-left: 20px;
  margin-right: 20px;
}

.tel-btn-gray {
  width: 140px;
  height: 64px;
  background: #C5C5C5;
  border-radius: 12px;
  line-height: 64px;
  text-align: center;
  color: #999999;
  font-size: 28px;
  display: inline-block;
  margin-left: 20px;
  margin-right: 20px;
}

.list-left {
  width: 150px;
  height: 115px;
  line-height: 115px;
  text-align: center;
  font-size: 24px;
  color: #494949;
  float: left;
  background-size: 49px 75px;
  display: flex;
  justify-content: center;
}

.list-left.order {
  font-size: 36px;
  font-weight: bold;
  color: #666666;
  line-height: 125px;
}

.list-left-img {
  width: 55px;
  height: 75px;
  border: none;
  background-size: 49px 75px;
  margin: 20px 0 0 0;
}

.list-tx {
  width: 66px;
  height: 115px;
  /*background: url(../assets/images/person_15.png) no-repeat center center;*/
  display: inline-block;
  border-radius: 50%;
  background-size: 65px 65px;
  position: relative;
}

.list-tx img {
  width: 66px;
  height: 66px;
  border-radius: 50%;
  margin-top: 27px;
  background-size: 65px 65px;
}

.list-niakname {
  width: 236px;
  height: 115px;
  float: left;
  margin-left: 30px;
  /*	background: #4381F8;*/
  line-height: 115px;
  text-align: left;
  font-size: 28px;
  color: #6b6969 !important;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.invitation-list-content ul li span {
  color: #b5b5b5;
  font-size: 28px;
  line-height: 115px;
}

.no-personage {
  color: #FE4B52 !important;
  font-size: 26px !important;
}

.rowNo-pm {
  color: #FE4B52 !important;
  font-size: 22px !important;
  margin-top: 20px;
}

.rowNo-num {
  color: #666666 !important;
  font-size: 36px !important;
  margin-top: 10px;
}

.row-big-box {
  width: 150px;
  display: felx;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  line-height: 20px !important;
}

.list-text1 {
  margin-left: 10px;
  float: left;
}

.list-text2 {
  width: 90px;
  height: 115px;
  float: left;
  text-align: center;
  color: rgba(203, 53, 55, 1) !important;
}

.list-text3 {
  margin: 0 20px 0 5px;
}

.list-right {
  width: 17px;
  height: 115px;
  background: url(../../assets/images/to_11.png) no-repeat center center;
  float: right;
  margin-right: 22px;
  background-size: 17px 29px;
  animation: up 3s linear infinite;
}

@keyframes up {
  0% {
    transform: translateY(-10px);
  }
  50% {
    transform: translateY(10px);
  }
  100% {
    transform: translateY(-10px);
  }
}

.cut-off-rule-box {
  width: 750px;
  height: 20px;
  background: rgba(249, 249, 249, 1);
}

.line {
  width: 90%;
  background: #e2e2e2!important;
  margin-left: 40px;
  height: 2px;
  border: none;
}

.clickMore {
  width: 750px;
  font-size: 30px;
  color: #b5b5b5;
  text-align: center;
  margin: 20px 0 30px;
  line-height: 50px;
}
/* 新加样式 */
.invite-des-content{
  position: absolute;
  z-index: 2;
  top: 75px;
  margin: 0 30px;
  padding: 20px 30px 30px;
  border-radius: 24px;
  font-size: 24px;
  font-weight: 400;
  color: #FF9326;
  line-height: 36px;
  background: url('../../assets/images/zxyh/des_bg.png') no-repeat;
  background-size: 100% 100%;
  box-shadow: 0 4px 5px -3px rgba(254, 228, 85, 1); 
}
.invite-des-content::before{
  position: absolute;
  top: -15px;
  left: 40px;
  display: inline-block;
  content: '';
  height: 24px;
  width: 33px;
  background: url('../../assets/images/zxyh/des_arrow.png') no-repeat;
  background-size: 100% 100%;

}
.main-box{
  height: calc(100% - 65px);
  overflow-y: auto;
}
.item-rank{
  padding-left: 40px;
  display: flex;
  flex-direction: row;
  align-items: center;
  background: #F9F9F9;
  border-radius: 12px 12px 12px 12px;
  margin: 10px 30px 0;
}
.num-box{
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-right: 20px;
  font-size: 24px;
  color: #C9131A;
}
.item-rank img{
  height: 66px;
  width: 66px;
  border-radius: 50%;
  margin-right: 20px;
}
.name-box{
  width: 200px;
  font-size: 28px;
  color: #333333;
}
.num-box span:nth-of-type(1){
  margin-bottom: 4px;
}
.invited-num{
  width: 200px;
  text-align: center;
  font-size: 28px;
  color: #666666;
}
.invited-num span{
  margin: 0 15px;
  color: #C9131A;
}
.item-rank::after{
  content: '';
  width: 17px;
  height: 90px;
  background: url(../../assets/images/to_11.png) no-repeat center center;
  float: right;
  margin-right: 22px;
  background-size: 17px 29px;
  animation: up 3s linear infinite;
}
.InvitationListArray-box{
  display: flex;
  flex-direction: column;
}
.num-box-index{
  width: 46px;
  text-align: left;
  margin-right: 20px;
  font-size: 28px;
  color: #333333;
}
.num-box-index + img + .name-box{
  width:254px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.order-box{
  height: 310px;
  width: calc(100vw - 60px);
  margin: auto;
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  /* background-color: red; */
  
}

.item-top-box{
  display: flex;
  flex-direction: column;
  align-items: center;
}
.item-top-box img{
  height: 72px;
  width: 72px;
  margin-bottom: 10px;
  border-radius: 50%;
  border:3px solid #FFFFFF;
}
.item-top-box .invited-num{
  font-size: 20px;

}
.item-top-box .name-box{
  text-align: center;
  margin-bottom: 10px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.box1{
  height: 280px;
  width: 250px;
  background: url('../../assets/images/zxyh/bg1.png') no-repeat;
  background-size: 100% 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  z-index: 1;
}
.box1::after{
  position: absolute;
  left: 0;
  right: 0;
  margin:auto;
  bottom: 34px;
  content: '';
  height: 65px;
  width: 160px;
  margin-top: 68px;
  background: url('../../assets/images/zxyh/no1.png') no-repeat;
  background-size: 100% 100%;
}
.box1 .item-top-box{
  position: relative;
  top: -30px;
}
.box2{
  height: 250px;
  width: 241px;
  background: url('../../assets/images/zxyh/bg2.png') no-repeat;
  background-size: 100% 100%;
  position: absolute;
  bottom: 0;
  left: 0;
}
.box2::after{
  position: absolute;
  left: 0;
  right: 0;
  margin:auto;
  bottom: 34px;
  content: '';
  height: 65px;
  width: 160px;
  margin-top: 68px;
  background: url('../../assets/images/zxyh/no2.png') no-repeat;
  background-size: 100% 100%;
}
.box2 .item-top-box{
  position: relative;
  top: -30px;
}
.box3{
  height: 230px;
  width: 244px;
  background: url('../../assets/images/zxyh/bg3.png') no-repeat;
  background-size: 100% 100%;
  position: absolute;
  bottom: 0;
  right: 0;
}
.box3::after{
  position: absolute;
  left: 0;
  right: 0;
  margin:auto;
  bottom: 34px;
  content: '';
  height: 65px;
  width: 160px;
  margin-top: 68px;
  background: url('../../assets/images/zxyh/no3.png') no-repeat;
  background-size: 100% 100%;
}
.box3 .item-top-box{
  position: relative;
  top: -30px;
}
.order-box .img-no{
  top: 44px;
}

</style>
